<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OpenLayers引用-加载天地图</title>
  <link rel="stylesheet" href="../assets/v6.15.1-dist/ol.css">
  <script src="../assets/v6.15.1-dist/ol.js"></script>

  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="map" class="map"></div>

  <script>
    // 初始化地图
    var map = new ol.Map({
      target: 'map',  // 绑定 DIV 元素
      // 添加图层
      layers: [
        new ol.layer.Tile({
          // 设置图层的数据源
          source: new ol.source.OSM()
        }),
      ],
      // 设置视图窗口
      view: new ol.View({
        // projection: "EPSG:4326",
        center: [112, 32],
        // center: [-11158582, 4813697],
        zoom: 5
      })
    });

    // 方法1：使用 ol.layer.Tile 和 ol.source.XYZ 加载天地图影像和标注
    const tianditu_satellite_layer = new ol.layer.Tile({
      name: '天地图卫星影像',
      source: new ol.source.XYZ({
        // url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密钥',
        url: 'http://t5.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=6a9f4b408cb773ba60fb639f3b713d61'
      })
    })

    const tianditu_satellite_label_layer = new ol.layer.Tile({
      name: '天地图卫星影像标注',
      source: new ol.source.XYZ({
        url: 'http://t5.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=6a9f4b408cb773ba60fb639f3b713d61'
      })
    })

    // map.addLayer(tianditu_satellite_layer);
    // map.addLayer(tianditu_satellite_label_layer);


    // 方法2：使用 ol.layer.Tile 和 ol.source.TileWMS 加载天地图影像WMS服务
    function getWMSTileLayer() {
      var wmsSource = new ol.source.TileWMS({
        // url: url,
        // url: 'http://210.12.142.176:7090/onemap22/rest/wms',
        url: 'http://210.12.142.176:7090/onemap22/rest/wms',
        params: {
          'LAYERS': 'WGS84',
          "FORMAT": "image/jpeg",		// 请求的瓦片格式
          "VERSION": "1.1.1",     // 请求使用的WMS版本
          "STYLES": "",		// 请求的图层样式
          // "TRANSPARENT": "FALSE",
          "WIDTH": 256,
          "HEIGHT": 256,
          "ACCOUNT": "hubei",
          "PASSWD": "MjAyM2h1YmVpQHNoZW5ndGFp",
          "BBOX": "90,22.5,112.5,45",
        },
        projection: "EPSG:4326",
        serverType: 'geoserver',
        // crossOrigin: 'anonymous'
      });

      return wmsSource;

    }

    // var wmsTileSource = getWMSTileLayer();
    // var wmsTileLayer = new ol.layer.Tile({
    //   source: wmsTileSource,
    // })

    // map.addLayer(wmsTileLayer);


    // http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=您的密钥
    function getWMTSTileLayer() {
      // 投影坐标系
      // const code = 'EPSG:900913';
      const code = 'EPSG:3857';
      const projection = ol.proj.get(code);
      const projectionExtent = projection.getExtent();
      const size = ol.extent.getWidth(projectionExtent) / 256;
      const resolutions = new Array(19);
      const matrixIds = new Array(19);
      for (let z = 0; z < 19; ++z) {
        resolutions[z] = size / Math.pow(2, z);
        // matrixIds[z] = code + ':' + z;
        matrixIds[z] = z;
      }

      // WMTS 资源对象
      var wmtsSource = new ol.source.WMTS({
        url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=6a9f4b408cb773ba60fb639f3b713d61',
        // layer: 'ibo',  // 图层名称
        layer: 'img',  // 图层名称
        matrixSet: 'w',
        format: 'tiles',
        // projection: projection,
        tileGrid: new ol.tilegrid.WMTS({
          origin: ol.extent.getTopLeft(projectionExtent),
          resolutions: resolutions,
          matrixIds: matrixIds,
        }),
        style: 'default',
        wrapX: true,
      });

      var wmtsTileLayer = new ol.layer.Tile({
        source: wmtsSource,
      });

      return wmtsTileLayer;
    }

    var wmtsTileLayer = getWMTSTileLayer();
    map.addLayer(wmtsTileLayer);

  </script>

</body>

</html>